<template>
	<view class="wrapper">
		<Head title="我的订单" leftIcon="left" :border="false"></Head>
		<view class="inner">
			<view class="dropdownMenu">
				<view class="menuItem" @click="openDialogTop('filterType')">
					<view class="text">
						<view class="substring">{{ filterTypeText }}</view>
					</view>
				</view>
				<view class="menuItem" @click="openDialogTop('filterState')">
					<view class="text">
						<view class="substring">{{ filterStateText }}</view>
					</view>
				</view>
			</view>
			<Loading v-if="loading" height="calc(100% - 100rpx)"></Loading>
			<view v-else class="list">
				<view v-if="orderList.length > 0" style="height: 100%;">
					<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower">
						<view class="item" v-for="(item, index) in orderList" :key="index" @click="handleJump('/service/orderShow', 'id', item.id)">
							<view class="line clearfix">
								<view class="lable">服务类型：</view>
								<view class="text">
									{{ item.service_name }}
									<text class="color"></text>
								</view>
							</view>
							<view class="line clearfix pd0">
								<view class="lable">订单号：</view>
								<view class="text">{{ item.oid }}</view>
							</view>
							<view class="line borderBottom clearfix pd25">
								<view class="lable">支付状态：</view>
								<!-- 0未支付 1已支付 2已关闭 -->
								<view class="text error" v-if="item.status == 0">未支付</view>
								<view class="text success" v-if="item.status == 1">已支付</view>
								<view class="text" v-if="item.status == 2">已关闭</view>
							</view>
							<view class="btns">
								<view class="price">
									实付金额：
									<text class="color">￥{{ item.service_amount_after_discount }}</text>
								</view>
								<view class="btnInner clearfix">
									<view class="btn" v-if="item.status == 2" @click.stop="handleOpenDelDialog(item)">删除订单</view>
									<view class="btn" v-if="item.status == 1" @click.stop="handleJump('/service/orderShow', 'id', item.id)">查看详情</view>
									<view class="btn" v-if="item.status == 0" @click.stop="handleOpenCancelOrder(item)">取消订单</view>
									<view class="btn pay" v-if="item.status == 0" @click.stop="handlePay(item)">立即支付</view>
								</view>
							</view>
						</view>
						<uni-load-more :status="loadmore" :contentText="contentText"></uni-load-more>
					</scroll-view>
				</view>
				<Empty v-else></Empty>
			</view>
		</view>
		<Dialog ref="cancelOrderDialog" title="系统提示" @confirm="handleCancelOrder"><view class="">确定取消该订单吗？</view></Dialog>
		<Dialog ref="delOrderDialog" title="系统提示" @confirm="handleDelOrder"><view class="">确定删除该订单吗？</view></Dialog>

		<!-- 全部类型 -->
		<DialogTop ref="filterType" :menuLists="filter_type" height="260" title="全部类型" @select="handleSelectType"></DialogTop>
		<!-- 全部状态 -->
		<DialogTop ref="filterState" :menuLists="filter_status" height="260" title="全部状态" @select="handleSelectState"></DialogTop>

		<!-- 立即支付弹窗 -->
		<PayDialog ref="PayDialog" :amount="payParams.amount" :isContinuesPay="true" :payParams="payParams"></PayDialog>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import handlerHttpError from '@/utils/error';
import http from '@/utils/http';
import api from '@/api';
export default {
	data() {
		return {
			filter_status: [{ text: '全部状态', id: '' }],
			filter_type: [{ text: '全部类型', id: '' }],
			filterTypeText: '全部类型',
			filterStateText: '全部状态',
			// 订单列表
			orderList: [],
			// 列表参数
			params: {
				service_type: '',
				status: '',
				page: 1,
				pagesize: 10
			},
			// 上拉加载
			loadmore: 'more',
			contentText: {
				contentdown: '加载更多数据',
				contentrefresh: '加载中...',
				contentnomore: '暂无更多数据'
			},
			loading: true,
			// 取消订单id
			cancelOrderId: 0,
			//删除订单id
			delOrderId: 0,
			// 支付参数
			payParams: {}
		};
	},
	onShow() {
		this.params.page = 1;
		this.getList(true);
	},
	computed: {
		...mapState(['LoginType'])
	},
	methods: {
		scrolltolower() {
			this.loadmore = 'loading';
			this.params.page++;
			if (this.loadmore == 'noMore') return;
			this.getList(false);
		},
		getList(init) {
			// 1企业 2个人
			if (this.LoginType == 1) {
				this.getCompanyOrderList(init);
			} else if (this.LoginType == 2) {
				this.getPersonalOrderList(init);
			}
		},
		//获取企业订单列表
		getCompanyOrderList(init) {
			http.get(api.company_orderlist, this.params).then(res => {
				if (res.code == 200) {
					let { filter_type, filter_status, items } = res.data;
					if (this.loading) {
						filter_status.forEach(item => {
							this.filter_status.push({
								text: item.label,
								id: item.value
							});
						});
						filter_type.forEach(item => {
							this.filter_type.push({
								text: item.label,
								id: item.value
							});
						});
					}

					if (init) {
						this.orderList = [...items];
					} else {
						this.orderList = this.orderList.concat(items);
					}
					this.$nextTick(() => {
						this.loading = false;
					});
					if (items.length < this.params.pagesize) {
						if (init === false) {
							this.loadmore = 'noMore';
						} else if (items.length == 0) {
							this.loadmore = 'noMore';
						}
					}
				}
			});
		},
		//获取个人订单列表
		getPersonalOrderList(init) {
			http.get(api.personalOrderList, this.params).then(res => {
				if (res.code == 200) {
					let { filter_type, filter_status, items } = res.data;
					if (this.loading) {
						filter_status.forEach(item => {
							this.filter_status.push({
								text: item.label,
								id: item.value
							});
						});
						filter_type.forEach(item => {
							this.filter_type.push({
								text: item.label,
								id: item.value
							});
						});
					}
					if (init) {
						this.orderList = [...items];
					} else {
						this.orderList = this.orderList.concat(items);
					}
					this.$nextTick(() => {
						this.loading = false;
					});
					if (items.length < this.params.pagesize) {
						if (init === false) {
							this.loadmore = 'noMore';
						} else if (items.length == 0) {
							this.loadmore = 'noMore';
						}
					}
				}
			});
		},
		// 删除订单弹窗开启
		handleOpenDelDialog(item) {
			this.delOrderId = item.id;
			this.$refs.delOrderDialog.open();
		},
		// 删除订单确认
		handleDelOrder() {
			if (this.LoginType == 1) {
				http.post(api.company_order_del, { id: this.delOrderId }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.getList(true);
					}
				});
			} else if (this.LoginType == 2) {
				http.post(api.personal_order_del, { id: this.delOrderId }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.getList(true);
					}
				});
			}
		},
		// 打开取消面试弹窗
		handleOpenCancelOrder(item) {
			this.cancelOrderId = item.id;
			this.$refs.cancelOrderDialog.open();
		},
		// 确认取消订单
		handleCancelOrder() {
			if (this.LoginType == 1) {
				http.post(api.company_order_cancel, { id: this.cancelOrderId }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.getList(true);
					}
				});
			} else if (this.LoginType == 2) {
				http.post(api.personal_order_cancel, { id: this.cancelOrderId }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.getList(true);
					}
				});
			}
		},
		// 路径跳转
		/**
		 * @url 跳转路径
		 * @name 参数名称
		 * @params 参数
		 * */
		handleJump(url, name, params) {
			if (params) {
				uni.navigateTo({
					url: url + '?' + name + '=' + JSON.stringify(params)
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		// 筛选弹窗开启
		openDialogTop(type) {
			this.params.page = 1;
			this.$refs[type].open('bottom');
		},
		// 全部类型
		handleSelectType(item) {
			this.filterTypeText = item.text;
			this.params.service_type = item.id;
			this.getList(true);
		},
		// 全部状态
		handleSelectState(item) {
			this.filterStateText = item.text;
			this.params.status = item.id;
			this.getList(true);
		},
		// 继续支付
		handlePay(item) {
			this.payParams = item;
			this.$refs.PayDialog.open();
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;

	.inner {
		height: calc(100% - 140rpx);
	}

	.dropdownMenu {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 30rpx;
		box-shadow: 0px 1px 30px 0px rgba(208, 208, 208, 0.26);
		.menuItem {
			color: #333;
			font-size: 28rpx;
			flex: 1;
			display: flex;
			min-width: 0;
			height: 100rpx;
			align-items: center;
			justify-content: center;
			position: relative;
			.text {
				max-width: 100%;
				position: relative;
				padding: 0 14rpx;
				&::after {
					position: absolute;
					top: 50%;
					right: -10rpx;
					margin-top: -12rpx;
					border: 8rpx solid;
					border-color: transparent transparent #ccc #ccc;
					transform: rotate(-45deg);
					opacity: 0.8;
					content: '';
				}
			}
		}
	}

	.list {
		height: calc(100% - 100rpx);

		.item {
			border-bottom: 10rpx solid #ededed;
			padding: 25rpx 36rpx 0;

			.line {
				font-size: 28rpx;
				padding: 15rpx 0;
				&.pd0 {
					padding: 0;
				}
				&.borderBottom {
					border-bottom: 1rpx solid #ededed;
				}
				&.pd25 {
					padding-bottom: 25rpx;
				}

				.lable {
					width: 160rpx;
					float: left;
					color: #333;
				}

				.text {
					float: left;

					&.success {
						color: #009900;
					}

					&.error {
						color: #f53e3e;
					}

					.color {
						color: #999;
					}
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 22rpx 0;

				.price {
					font-size: 28rpx;
					color: #333;

					.color {
						color: #f53e3e;
					}
				}

				.btnInner {
					.btn {
						border-radius: 10rpx;
						color: #999;
						font-size: 28rpx;
						padding: 10rpx 20rpx;
						border: 1rpx solid #ededed;
						float: left;
						margin: 10rpx;

						&:last-child {
							margin-right: 0;
						}

						&.pay {
							color: #5886fe;
							border: 1rpx solid #5886fe;
						}
					}
				}
			}
		}
	}
}
</style>
